<template>
    <div class="search-result">
        <van-cell title="搜索历史" center>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <div v-if="isDelShow">
                    <span @click="$emit('clearDataSearch')">全部删除</span>
                    &nbsp;
                    <span @click="isDelShow = false">完成</span>
                </div>
                <van-icon v-else name="delete" @click="isDelShow = true" />
            </template>
        </van-cell>
        <van-cell @click="onSearchItemClick(item, index)" v-for="(item, index) in searchHistories" :key="index"
            :title="item" center>
            <template #right-icon>
                <van-icon v-show="isDelShow" name="close" />
            </template>
        </van-cell>

    </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'SearchHistory',
  props: {
    searchHistories: {
      type: Array,
      required: true
    }
  },
  setup (props, content) {
    const isDelShow = ref(false)
    const onSearchItemClick = (item, index) => {
      if (isDelShow.value) {
        // 删除状态 删除
        content.emit('delete', index)
        // props.searchHistories.splice(index, 1)
      } else {
        // 非删除状态 搜索
        content.emit('search', item)
      }
    }
    return {
      isDelShow,
      onSearchItemClick
    }
  }
}
</script>

<style scoped lang="less">

</style>
